<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        th,
        td{
            width: 100px;
            height: 30px;
            border: 2px solid blue;
        }
        table{
            border-collapse: collapse;
            margin-top: 10px;
            text-align: center;
        }
        .box{
            width: 1000px;
            margin: 0 auto;
        }
        thead th:nth-child(1),
        thead th:nth-child(3){
            width: 260px;
        }
        .yzm{
            text-align: center;
            width: 80px;
            height: 25px;
            margin: 0 10px;
            color: white;
            border: 0;
            background-color: blue;
        }
        .xuan{
            color: red;
        }
        .biaoTi{
            font-size: 40px;
        }
        .mtk{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: aqua;
            color: red;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            display: none;
        }
    </style>
</head>
<body>
    <div class="mtk"></div>
    <div class="box">
        <p class="biaoTi">KKY点餐系统</p>
        菜名：<input type="text" class="cm"><br>
        价格：<input type="text" class="jg"><br>
        份数：<input type="text" class="fs"><br>
        <p>验证码: <input type="text" class="yz_m"> <button class="yzm"></button>
        <button onclick="sx()">刷新验证码</button></p>
        <button onclick="add()">添加</button><br>
        <table>
            <thead>
                <tr>
                    <th>全选/全不选 <input type="checkbox" class="qxx" onclick="qx(this)"></th>
                    <th>序号</th>
                    <th>添加时间</th>
                    <th>菜名</th>
                    <th>价格</th>
                    <th>分数</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <td><input type="checkbox" class="fuxuan" onclick="fx()" value="${shuju[i].id}"></td>
                <td>${i+1}</td>
                <td>${shuju[i].sj}</td>
                <td>${shuju[i].cm}</td>
                <td>${(shuju[i].jg/1).toFixed(2)}</td>
                <td>${(shuju[i].fs/1).toFixed(2)}</td>
                <td>${(shuju[i].jg*shuju[i].fs).toFixed(2)}</td>
                <td><button onclick="sc()">删除</button></td> -->
            </tbody>
            <tfoot>
                <tr>
                    <th class="xuan" onclick="xzsc()">选中删除</th>
                    <th colspan="4">全部总计：</th>
                    <th colspan="3" class="qbzj"></th>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>
<script>
    function cun(arr){
        localStorage.setItem('data',JSON.stringify(arr));
    }
    function qu(){
        var data=localStorage.getItem('data');
        if(data!=null){
            return JSON.parse(data)
        }else{
            return []
        }
    }
    var yzm1=document.querySelector('.yzm')
    var cm=document.querySelector('.cm');
    var jg=document.querySelector('.jg')
    var fs=document.querySelector('.fs')
    var mtk=document.querySelector('.mtk')
    var yz_m=document.querySelector('.yz_m')
    var tbody=document.querySelector('tbody')
    var qxx=document.querySelector('.qxx')
    var qbzj=document.querySelector('.qbzj')
    function tcmtk(info){
        //出现
        mtk.style.display='block';
        //赋值
        mtk.innerHTML=info;
        setTimeout(function(){
            mtk.style.display='none';
        },2000)
    }
    function add(){
        if(cm.value.trim()==''){
            tcmtk('菜名不能为空')
        }else if(jg.value.trim()==''){
            tcmtk('价格不能为空')
        }else if(fs.value.trim()==''){
            tcmtk('份数不能为空')
        }else{
            var arr=qu();
            arr.push({
                sj:new Date().toLocaleString().replaceAll('/','-'),
                cm:cm.value,
                jg:jg.value,
                fs:fs.value,
                id:+new Date()
            });
            cun(arr);
            xr()
        }
    }
    function xr(){
        //清空tbody
        tbody.innerHTML='';
        var shuju=qu();
        var sum=0;
        for(var i=0;i<shuju.length;i++){
            var tr=document.createElement('tr');
            tr.innerHTML=`
            <td><input type="checkbox" class="fuxuan" onclick="fx()" value="${shuju[i].id}"></td>
                <td>${i+1}</td>
                <td>${shuju[i].sj}</td>
                <td>${shuju[i].cm}</td>
                <td>${(shuju[i].jg/1).toFixed(2)}</td>
                <td>${(shuju[i].fs/1).toFixed(2)}</td>
                <td>${(shuju[i].jg*shuju[i].fs).toFixed(2)}</td>
                <td><button onclick="sc()">删除</button></td>
            `;
            tbody.appendChild(tr);
            //累加求和
            sum+=shuju[i].jg*shuju[i].fs;
        }
        //把总价赋值到页面对应的位置
        qbzj.innerHTML=sum.toFixed(2)+'元'
    }
    xr();
    function qx(aaa){
        var fxsDom=document.querySelectorAll('.fuxuan');
        for(var i=0;i<fxsDom.length;i++){
            fxsDom[i].checked=aaa.checked;
        }
    }
    function fx(){
        var fxsDom=document.querySelectorAll('.fuxuan');
        var xz_fxsDom=document.querySelectorAll('.fuxuan:checked');
        if(fxsDom.length==xz_fxsDom.length){
            qxx.checked=true
        }else{
            qxx.checked=false
        }
    }
    function xzsc(){
        var arr=[];
        var xz_fxsDom=document.querySelectorAll('.fuxuan:checked');
        for(var i=0;i<xz_fxsDom.length;i++){
            arr.push((xz_fxsDom[i].value)/1)
        }
        console.log(arr);
        var shuju=qu();
        var newarr=shuju.filter(function(val,i){
            return arr.includes(val.id)==false
        });
        cun(newarr);
        xr();
    }
</script>